<template>
  <div >
    <el-card class="box-card">
      <template #header>
        <div class="leve_title">
          <span>{{ title }}</span>
        </div>
      </template>
      <div>
        <el-form ref="formQuery" label-width="95px" :model="formList">
          <el-row :gutter="24" justify="space-around">
            <el-col v-bind="colLayout">
              <div>
                <el-form-item class="customerDiv3" label="单据号" prop="settle_org_uid">
                  <VabSelectForm  v-model="formList.uid" :options="settleOrgUidList" :multiple="false"/>
                </el-form-item>
              </div>
            </el-col>
            <el-col v-bind="colLayout">
              <div>
                <el-form-item class="customerDiv3" label="单据状态" prop="status">
                  <VabSelectForm  v-model="formList.status" :options="statusList" :multiple="true"/>
                </el-form-item>
              </div>
            </el-col>
            <el-col v-bind="colLayout">
              <div>
                <el-form-item class="customerDiv3" label="销售组织" prop="sales_org_id">
                  <VabSelectForm  v-model="formList.sales_org_id" :options="sales_org_list"  :multiple="true"/>
                </el-form-item>
              </div>
            </el-col>
            <el-col  v-bind="colLayout"  v-if="retract">
              <div>
                <el-form-item class="customerDiv3" label="客户" prop="customer_uid">
                  <VabSelectForm   v-model="formList.customer_uid" :options="customer_list"  :multiple="true"/>
                </el-form-item>
              </div>
            </el-col>
            <el-col  v-bind="colLayout"  v-if="retract">
              <div>
                <el-form-item class="customerDiv3" label="产品名称" prop="goods_name">
                  <SelectLoading type="name"  style="width: 100%" :multiple="true" v-model="formList.goods_name"  userOrgId="1" />
                </el-form-item>
              </div>
            </el-col>
            <el-col  v-bind="colLayout"  v-if="retract">
              <div>
                <el-form-item class="customerDiv3" label="产品编码" prop="goods_no">
                  <SelectLoading type="number"  style="width: 100%" :multiple="true" v-model="formList.goods_no"  userOrgId="1" />
                </el-form-item>
              </div>
            </el-col>
            <el-col  v-bind="colLayout"  v-if="retract">
              <div>
                <el-form-item class="customerDiv3" label="条码" prop="barcode">
                  <SelectLoading type="barcode"  style="width: 100%" :multiple="true" v-model="formList.barcode"  userOrgId="1" />
                </el-form-item>
              </div>
            </el-col>
            <el-col  v-bind="colLayout"  v-if="retract">
              <div>
                <el-form-item class="customerDiv3" label="订单编号" prop="order_uid">
                  <VabSelectForm  v-model="formList.order_uid" :options="uidList" :multiple="false"/>
                </el-form-item>
              </div>
            </el-col>
            <el-col  v-bind="colLayout"  v-if="retract">
              <div>
                <el-form-item class="customerDiv3" label="订单流转状态" prop="order_status">
                  <VabSelectForm  v-model="formList.order_status" :options="statusOrderList" :multiple="true"/>
                </el-form-item>
              </div>
            </el-col>
            <el-col  v-bind="colLayout"  v-if="retract">
              <div>
                <el-form-item class="customerDiv3" label="销售员" prop="sales_user_name">
                  <VabSelectForm  v-model="formList.sales_user_name" :options="create_user_name_list"  :multiple="true"/>
                </el-form-item>
              </div>
            </el-col>
            <!--    ********************-->
            <el-col  v-bind="colLayout"  v-if="retract">
              <div>
                <el-form-item label="销售金额" prop="amount" style="display: flex; flex-wrap: nowrap">
                  <el-input-number style="flex: 1" :controls='false' type="number" :min="0"  v-model="formList.amount_start" clearable class="input_many" />
                  <span>
                    -
                  </span>
                  <el-input-number style="flex: 1"  :controls='false' type="number" :min="0" v-model="formList.amount_end" class="input_many" clearable />
                </el-form-item>
              </div>
            </el-col>
            <el-col  v-bind=" retract? colLayout1 :colLayout2 ">
              <div class="button-query">
                <el-button v-debounce="query" type="primary">
                  查询
                </el-button>
                <el-button  v-debounce="resetting">
                  重置
                </el-button>
                <div class="sqFontSize" @click="retractClick">
                  更多
                  <el-icon v-if="retract"><ArrowUp /></el-icon>
                  <el-icon v-else><ArrowDown /></el-icon>
                </div>
              </div>
            </el-col>
          </el-row>
        </el-form>
      </div>
    </el-card>
  </div>
</template>

<script setup lang="ts">
import { defineProps } from "vue";
import {customer_optionsList} from "/@/api/dms/customer";
import {organization_list} from "/@/api/dms/organization";
import {getProductList} from "/@/api/dms/product";
import {orderOptions} from "/@/api/dms/order";
import lodash from 'lodash';
import SelectLoading from '/@/components/lazySelect/demo.vue'
import {orderGroupOptions} from "/@/api/dms/order/group";
// 定义查询标题
const title = ref('客户订单')
let props:any = defineProps(['title','statusOrder'])
const $emits = defineEmits(['queryClick','resettingClick'])
watchEffect(() => {
  title.value = props.title
})
const colLayout = {    xs: 24,    sm: 12,    md: 8,    lg: 6,    xl: 6, span:8 }
const colLayout2 = {    xs: 24,    sm: 12,    md: 24,    lg: 6,    xl: 6, span:8 }
const colLayout1 = {    xs: 24,    sm: 12,    md: 8,    lg: 6,    xl: 6, span:8 }
//收起
const retract = ref(false)
const retractClick = ()=>{
  retract.value = ! retract.value
}
// 表单
const formQuery = ref<any>(null)
const formList = ref({
  uid: '',
  status:'',
  order_uid:'',
  goods_name: '',
  goods_no:'',
  order_status:'',
  sales_org_id: '',
  customer_uid: '',
  amount_start: null,
  amount_end:null,
  sales_user_name: '',
  barcode:'',
})
// 状态
const statusList = ref([
  { value: 0, label: '草稿' },
  { value: 1, label: "已保存" },
  { value: 2, label: '待审核' },
  { value: 20, label: '已审核' },
  { value: 19, label: '审核拒绝' },
  { value: 79, label: '部分发出' },
  { value: 82, label: ' 已发出' },
  { value: 100, label: '已完成' },
  { value: 110, label: '已取消' },
])
const statusOrderList =  ref([
  { value: 110, label: '已取消' },
  { value: 1, label: "已保存" },
  // { value: 2, label: '已提交' },
  { value: 10, label: '待审核' },
  // { value: 20, label: '已审核' },
  { value: 30, label: '已审核待付款' },
  { value: 40, label: '已付款待发货' },
  { value: 80, label: '已出库' },
  { value: 82, label: '已发出' },
  { value: 100, label: '已完成' },
])
// 来源
const tradeFromList = ref([
  { value: '员工', label: '员工' },
  { value: "客户", label: "客户" },
])
const create_user_name_list = ref([])
const typeList = ref<any>([
  { value: '1', label: '标准销售订单' },
  { value: '2', label: '寄售订单' },
  { value: '3', label: '快速下单' },
])
//产品名称
const goods_name_list = ref<any>([])
const customer_list = ref<any>([])
const sales_org_list = ref<any>([])
const settleOrgUidList = ref<any>([])
const uidList = ref<any>([])
const query = () => {
  $emits('queryClick',formList.value)
}
// *********父级订单  订单拆分*************
/*const orgUid = lodash.debounce((va:any)=>{
  getOrderGroupId(va)
},500)
const orgUid1 = lodash.debounce((va:any)=>{
  getuid(va)
},500)*/
// 重置
const resetting = () => {
  formList.value = {
    uid: '',
    status:'',
    order_uid:'',
    goods_name: '',
    goods_no:'',
    order_status:'',
    sales_org_id: '',
    customer_uid: '',
    amount_start: null,
    amount_end:null,
    sales_user_name: '',
    barcode:'',
  }
  $emits('resettingClick',formList.value)
}
const numberValue =()=>{
  if(formList.value.amount_start != null){
    if( formList.value.amount_start <= formList.value.amount_end ){
      formList.value.amount_end = formList.value.amount_start
    }
  }

}
const getCustomer=async ()=>{
  // 客户
  await customer_optionsList({is_group:2,name:''}).then((data:any)=>{
    if(data.code == 200){
      customer_list.value = data.data.map((item:any)=> {return {value:item.uid , label:item.name}})
    }
  })
  // 组织
  await  organization_list({}).then((data:any)=>{
    if(data.code == 200){
      sales_org_list.value = data.data.map((item:any)=> {return {value:item.uid , label:item.name}})
    }
  })
  //订单组筛选项
  await orderGroupOptions({type:props.statusOrder}).then((data:any)=>{
    if(data.code == 200){
      create_user_name_list.value = data.data.sales_user.map((item:any)=> {return {value:item.sales_user_name , label:item.sales_user_name}})
      settleOrgUidList.value = data.data.group_uid.map((item:any)=> {return {value:item.uid , label:item.uid}})
      uidList.value = data.data.order_uid.map((item:any)=> {return {value:item.uid , label:item.uid}})
    }
  })
/*  //  单据号
  orderOptions({column:'order_group_uid',keyword:''}).then((data:any)=>{
    if(data.code == 200){
      settleOrgUidList.value = data.data.map((la:any)=>{return{label:la,value:la}})
    }
  })
  //  订单编号
  orderOptions({column:'uid',keyword:''}).then((data:any)=>{
    if(data.code == 200){
      settleOrgUidList.value = data.data.map((la:any)=>{return{label:la,value:la}})
    }
  })*/
  // 产品名称
  // await getProductList({limit: 2000,page: 1,type: 2}).then((data:any)=>{
  //   if(data.code == 200){
  //     goods_name_list.value= data.data.list.map((item:any)=> {return {value:item.name , label:item.name}})
  //   }
  // })
}
/*const getOrderGroupId = (va:any = '')=>{
  orderOptions({column:'order_group_uid',keyword:va,type:1}).then((data:any)=>{
    if(data.code == 200){
      settleOrgUidList.value = data.data.map((la:any)=>{return{label:la,value:la}})
    }
  })
}
const getuid = (va:any = '')=>{
  orderOptions({column:'uid',keyword:va,type:1}).then((data:any)=>{
    if(data.code == 200){
      uidList.value = data.data.map((la:any)=>{return{label:la,value:la}})
    }
  })
}*/
onActivated(()=>{
  getCustomer()
})
//抛出数据
// defineExpose({
//   aaaa: query
// })
</script>

<style lang="scss" scoped>
@import "../index";
.customerDiv3 {
  :deep() {
    .el-autocomplete {
      width: 100%;
    }
  }
}

.input_many {
  display: inline-block;
  width: 48.8%
}

.button-query {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  height: 32px;
}
</style>


